HTML Lecture 2


Empty Tags

Empty tags represents formatting constructs, such as line breaks <BR>, horizontal rule <hr>, and paragraph breaks <p>. Empty tags indicate "one time" instructions that browsers can read and execute without concern for any other HTML construction or document text.

Below are a few of these Empty Tags.

<p> otherwise called paragraph tag denotes beninning and ending of sentences to be displayed as a single paragraph. It is not necessary to use closing paragraph </p> tag.

<br> directs client's browser to insert a line break in your HTML document. This tag can either follow text or be placed on it's own line. Does not require closing tag.

<hr> draws an horizontal rule that is self-justifying and shaded for a 3D look by default. Does not require a closing tag.

View a more completed list of empty tags.


Using colors for Background and Text

The follow allows you to set the color of the background to something specific.

To add an image as your background the follow is all you need.

To follow sets the color of all normal text within the document.


Adding Life to Your Background

Before background color

<HTML>
<HEAD>
    <TITLE>My first web page</TITLE>
</HEAD>
<BODY>

<h1>This is my web page.</h1>

</BODY>
</HTML>

After background   color

<HTML>
<HEAD>
    <TITLE>My first web page</TITLE>
</HEAD>

<BODY BGCOLOR="#4D4DFF">
       
<h1>This is my web page.</h1>

</BODY>
</HTML>

Using a file for your background

<HTML>
<HEAD>
    <TITLE>My first web page</TITLE>
</HEAD>

<BODY BACKGROUND ="david.jpg">

<h1>This is my web page.</h1>

</BODY>
</HTML>


Changing Color of your Text

Web page before changing color of text

Web page after changing color of text

<HTML>
<HEAD>
    <TITLE>My first web page</TITLE>
</HEAD>

<BODY BGCOLOR="#4D4DFF" TEXT="#FFFF00">

<h1>This is my web page.</h1>

</BODY>
</HTML>


FORMATTING FONTS

Fonts are a very important part of any web page.

<Font SIZE> tag

You can change the font attributes by using the <FONT> tag. <FONT SIZE=(+ or - size)> will increase or decrease the size of the current font.

View
<FONT SIZE=+3>M</FONT>AKE
<FONT SIZE=+4>
T</FONT>HE
<FONT SIZE=+4>
M</FONT>OST
<FONT SIZE=+3>
O</FONT>F
<FONT SIZE=+5>
F</FONT>ONTS

The <TT> tag changes the font to Courier (if you haven't altered your browser settings otherwise).  You can use <TT> with <H1> to give it a nice typewriter look.  You can also use <code> to give your font a monospace font when viewed through a browser, (usually the default font of browser).

<Font Face> tag

If you want to try something even cooler,  try the <FONT FACE> tag (but specific to Netscape 3.0b5+ and Microsoft Internet Explorer 2.0+). . With the FACE attribute, you can specify a list of desired fonts for viewing text.  Font face is the sytle of font you want to use, like "Comic Sans MS", "Arial", "Times New Roman", you get the point.

View
<FONT FACE="Comic Sans MS, Arial, Geneva">This will be displayed in  Comic Sans MS, Arial, or Geneva  depending on the support of your browser. If you are not sure what fonts each browser supports you would use this
. </FONT>   (If Comic Sans MS isn't available on your system, Arial will be used instead!   (You can list as many fonts as you like..your web browser will just go through the list until it sees a font that is on your system.)

bl_pin.gif (1016 bytes) Just remember that your audience is using a variety of computer systems and browsers.  So, a combination like "Arial, Geneva" for the <FONT FACE> tag is good since Arial is generally available on PCs, while Geneva is a Macintosh font.  It's a good rule not to pick a font that people aren't likely to have on their machine. 

<Font color> tag

OK, so we've changed the font size  by using <FONT SIZE> tag,  we've even changed the style of font we want  by using <FONT FACE> tag, so can wet change the color of our fonts? Yeap, the <FONT> tag even has an option for COLOR.  WOW. The colors work the same as colors on the <BODY> tag. Here are some examples:

<FONT COLOR="#FF0000">Red</FONT>
<FONT COLOR="#00FF00">
Green</FONT>
<FONT COLOR="#0000FF">
Blue</FONT>

You can also give a color name! Things like this work fine:
<FONT COLOR="Yellow">Yellow</FONT>
<FONT COLOR="Purple">
Purple</FONT>

My favorite colors (in no particular order) are blue, purple, green, and gray.

Well that about wraps up this lecture.